<template>
	<view class="content">
		<view class="" v-if="Object.keys(datalist).length > 0">


			<!-- <view class="wid90 mar foSi50 coFFF">欢迎加入乐优康</view> -->
			<view class="wid90 mar20 borRad20 bacFFF">

				<view class="wid100">
					<view class="wid90 mar dis disAl hei80">
						<view style="width: 40%;"><span style="color: #FF0000;">* </span>医生姓名：</view>
						<input style="width: 60%;" v-model="form.nickname" placeholder="请输入医生姓名" />
					</view>
					<view class="xhx"></view>
					<view class="wid90 mar dis disAl hei80">
						<view style="width: 40%;"><span style="color: #FF0000;">* </span>医生手机号码：</view>
						<input style="width: 60%;" v-model="form.mobile" placeholder="请输入医生手机号码" />
					</view>
					<view class="xhx"></view>
					<view class="wid90 mar dis disAl hei80">
						<view style="width: 40%;"><span style="color: #FF0000;">* </span>医生性别：</view>
						<radio-group @change="radioChange">
							<label class="radio">
								<radio value="1" :checked="form.gender == 1" /> <text
									style="margin-left: 10rpx;">男</text>
							</label>
							<label class="radio" style="margin-left: 10rpx;">
								<radio value="2" :checked="form.gender == 2" /> <text
									style="margin-left: 10rpx;">女</text>
							</label>
						</radio-group>
					</view>


					<view class="xhx"></view>
					<view class="wid90 mar dis disAl hei80">
						<view style="width: 40%;"><span style="color: #FF0000;">* </span>机构地址：</view>
						<picker mode="region" style="width: 60%;" @change="districtChange" :value="date">
							<view v-if="form.province">{{form.province+'-'+form.city+'-'+form.area}}</view>
							<view v-if="!form.province" class="wid100" style="height: 80rpx;color: #ccc;">请选择机构地址</view>
						</picker>
					</view>
					<view class="xhx"></view>
					<view class="wid90 mar dis disAl hei80">
						<view style="width: 40%;"><span style="color: #FF0000;">* </span>详细地址：</view>
						<input style="width: 60%;" v-model="form.address" placeholder="请输入详细地址" />
					</view>
					<view class="xhx"></view>
					<view class="">
						<view style="margin-left: 16px;margin-top: 10px;"><span style="color: #FF0000;">* </span>资质照片：
						</view>
						<view class=""
							style="display: flex;align-items: center;justify-content:space-around;margin-top: 50rpx;">
							<view class="" style="display: flex;flex-direction: column;align-items: center;"
								@click="upimg(1)">
								<view class="">
									<image v-if="form.pra_img == ''" :src="url+'wechatimg/upimg.png'" style="width: 200rpx;height:200rpx" mode=""></image>
									<image v-else :src="url+form.pra_img" style="width: 200rpx;height:200rpx" mode=""></image>
								</view>
								<view class="">
									医师执业证书
								</view>
							</view>
							<view class="" @click="upimg(2)">
								<view class="">
									<image v-if="form.qua_img == ''" :src="url+'wechatimg/upimg.png'" style="width: 200rpx;height:200rpx;" mode=""></image>
									<image v-else :src="url+form.qua_img" style="width: 200rpx;height:200rpx;" mode=""></image>
								</view>
								<view class="">
									医师资格证书
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="wid80 mar hei80 borRad20 dis disAl disJuC foSi40 mar-top30 coFFF"
					style="background-color: #1262DB;" @click="addEdit">提交</view>
				<view class="foSi25 textCen mar-top30" @click="callPhone">
					<view style="font-weight: 600;">商务热线</view>
					<view class="mar-top20" style="color: #797878;">{{tel}}</view>
				</view>
				<view class="foSi25 textCen mar-top30" @click="tiaozhuan('/pages/common/richtext?data='+agreement)">
					<view style="font-weight: 600;">相关合同</view>
					<view class="mar-top20" style="color: #797878;">《乐优康签订协议》</view>
				</view>
				<view style="height: 20rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				province: '',
				city: '',
				area: '',
				date: '',
				tel: '',
				agreement: '',
				datalist:{},
				form: {
					clinic_id: uni.getStorageSync('clinic_id'),
					nickname: '',
					mobile: '',
					gender: '',
					province: '',
					city: '',
					area: '',
					address: '',
					pra_img: '', //执业证书
					qua_img: '', // 资格证书

				},
				
			}
		},
		onLoad() {
			// this.getuserinfo()
			this.gteAgreement()
			this.getdata()
		},
		methods: {
			upimg(type) {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.uploadFile({
							url: that.url + 'api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var result = JSON.parse(uploadFileRes.data)
								if(result.code == 1){
									if(type == 1){
										that.form.pra_img = result.data.url
									}else{
										that.form.qua_img = result.data.url
									}
								}
								console.log(uploadFileRes.data);
							}
						});

					}
				});
			},
			getdata() {
				var that = this
				uni.request({
					url: that.global.url + 'api/device/clinic_details',
					method: "POST",
					data: {
						id: uni.getStorageSync('clinic_id')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.datalist = result.data
							that.province = result.data.province_text
							that.city = result.data.city_text
							that.area = result.data.area_text

						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				});
			},
			radioChange(e) {
				console.log(e)
				this.form.gender = e.detail.value
			},
			// 拨打电话
			callPhone() {
				var that = this
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: that.tel,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [that.tel],
						success: function(res) {
							console.log(res);
							uni.makePhoneCall({
								phoneNumber: that.tel,
							})
						}
					})
				}
			},
			gteAgreement() {
				var that = this
				uni.request({
					url: that.global.url + 'api/index/agreement',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.tel = result.data.tel
							that.agreement = result.data.agreement
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					}
				})
			},

			addEdit() {
				var that = this
				var group_id = ''
				console.log(that.form)
				if (!that.form.nickname) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return
				}
				let reg = /^[1][2,3,4,5,7,8,9][0-9]{9}$/ //正则表达式定义手机号正确格式
				if (!reg.test(that.form.mobile)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				console.log(that.province)
				if (!that.form.province) {
					uni.showToast({
						title: '请选择区域',
						icon: 'error'
					})
					return
				}
				if (!that.form.address) {
					uni.showToast({
						title: '请输入地址',
						icon: 'error'
					})
					return
				}
				let param = that.form
				console.log(param)
				// return false;
				uni.request({
					url: that.global.url + 'api/clinic/add_doctor',
					method: "POST",
					header: {

					},
					data: param,
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.showToast({
								title: result.msg,
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}
					}
				})
			},

			districtChange(e) {
				this.form.province = e.detail.value[0];
				this.form.city = e.detail.value[1];
				this.form.area = e.detail.value[2];
			},

		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #1262DB;
	}

	page {
		background-color: #1262DB;
	}
</style>